<template>
  <v-container
    class="green lighten-2"
    style="position:fixed;top:0px;bottom:0px;left:0px;rigth:0px;overflow:scroll;"
  >
    <!-- 第零行，标题、返回按钮、问号图标 -->
    <v-row class="mt-n3">
      <v-col>
        <v-btn :to="{name:'home'}" class="mx-2" elevation="0" fab outlined x-small color="white">
          <v-icon color="white">mdi-keyboard-backspace</v-icon>
        </v-btn>
      </v-col>
      <v-col>
        <h3 class="d-flex justify-center">绿 色 积 分</h3>
      </v-col>
      <v-col>
        <v-dialog v-model="dialog" scrollable persistent width="330">
          <template v-slot:activator="{ on }">
            <v-row justify="end">
              <v-icon class="mr-4" v-on="on">mdi-help-circle</v-icon>
            </v-row>
          </template>
          <v-card>
            <v-card-title class="headline grey lighten-2" primary-title>绿色积分规则</v-card-title>
            <v-card-text style="height: 400px;">
              <b>一、获得绿色积分</b>
              <br />①公共自行车，骑行1次得10分，每天最多领取80分，第二天领取。
              <br />②公交车，刷卡1次得10分，每天最多领取80分，第二天领取。
              <br />③地铁，刷卡1次得10分，每天最多领取80分，第二天领取。
              <br />④步行，每5000步为10分，每天最多领取40分，需当天领取。
              <br />⑤不开车可申请双倍积分，申报次日不开车，次日产生的绿色积分将双倍计算。可一键领取，每日可领绿色积分，也可点击小图标分类进行查看明细并领取。
              <br />⑥IPhone：
              <br />--IPhone5s以上才支持计步功能。
              <br />--请确认设置隐私中的运动与健身开关开启。
              <br />⑦安卓计步注意事项：
              <br />--每天开始计步时，请打开app，从而启动计步功能，计步过程中不要关闭我的app，关闭可能会影响计步准确性，保持后台运行即可。
              <br />--建议您在计步过程中每隔一段时间打开一次app确认没有被手机系统360卫士等软件清理。
              <br />--华为手机进入设置中开启计步器，并在设置受保护的后台应用，将本软件设为以保护。
              <br />--建议您安装。咕咚等计步软件，以提高计步精确度。
              <br />
              <br />
              <b>二、补领</b>
              <br />支持最多领取近两日积分，如当天忘记领取积分，可在一键领取时补领近两日内所有积分。
              <br />
              <br />
              <b>三、使用</b>
              <br />累积的绿色积分可以在我的南京绿色商城兑换实物奖励，也可以兑换成碳积分。碳积分可在商城抵扣现金使用兑换规则，
              <span
                style="color:red;"
              >每100个绿色积分兑换1个碳积分，每1个碳积分抵扣1元</span>，每月最高可兑换30个碳积分，每笔订单最多使用10个碳积分。
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="primary" text @click="dialog = false">确定</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-col>
    </v-row>
    <!-- 第零行，问号图标 -->
    <!-- <v-dialog v-model="dialog" scrollable persistent width="300">
      <template v-slot:activator="{ on }">
        <v-row justify="end">
          <v-icon class="mr-4" v-on="on">mdi-help-circle</v-icon>
        </v-row>
      </template>
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          绿色积分规则
        </v-card-title>
        <v-card-text style="height: 400px;">
          一、获得绿色积分
          <br>
          ①公共自行车，骑行1次得10分，每天最多领取80分，第二天领取。
          <br>
          ②公交车，刷卡1次得10分，每天最多领取80分，第二天领取。
          <br>
          ③地铁，刷卡1次得10分，每天最多领取80分，第二天领取。
          <br>
          ④步行，每5000步为10分，每天最多领取40分，需当天领取。
          <br>
          ⑤不开车可申请双倍积分，申报次日不开车，次日产生的绿色积分将双倍计算。可一键领取，每日可领绿色积分，也可点击小图标分类进行查看明细并领取。
          <br>
          ⑥IPhone：
          -IPhone5s以上才支持计步功能。
          -请确认设置隐私中的运动与健身开关开启。
          <br>
          ⑦安卓计步注意事项：
          -每天开始计步时，请打开app，从而启动计步功能，计步过程中不要关闭我的app，关闭可能会影响计步准确性，保持后台运行即可。
          -建议您在计步过程中每隔一段时间打开一次app确认没有被手机系统360卫士等软件清理。
          -华为手机进入设置中开启计步器，并在设置受保护的后台应用，将本软件设为以保护。
          -建议您安装。咕咚等计步软件，以提高计步精确度。
          <br>
          二、补领
          支持最多领取近两日积分，如当天忘记领取积分，可在一键领取时补领近两日内所有积分。
          <br>
          三、使用
          累积的绿色积分可以在我的南京绿色商城兑换实物奖励，也可以兑换成碳积分。碳积分可在商城抵扣现金使用兑换规则，每100个绿色积分兑换1个碳积分，每1个碳积分抵扣1元，每月最高可兑换30个碳积分，每笔订单最多使用10个碳积分。
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" text @click="dialog = false">
            确定
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>-->

    <!-- 第一行，头像、分数、兑换按钮 -->
    <v-row>
      <!-- 第一列，头像 -->
      <v-col cols="3">
        <v-avatar size="64">
          <img src="https://cdn.vuetifyjs.com/images/lists/2.jpg" alt="John" />
        </v-avatar>
      </v-col>
      <!-- 第二列，积分 -->
      <v-col cols="8">
        <v-row>
          <!-- 昵称 -->
          <v-col cols="8">
            <div class="white--text font-weight-bold headline mt-n2 ml-n3">张小明</div>
          </v-col>
          <v-col cols="4">
            <v-row>
              <v-btn :to="{name:'exchange'}" small color="blue-grey" class="my-2 ml-n3 white--text">
                兑换碳积分
                <v-icon right dark>mdi-cloud-upload</v-icon>
              </v-btn>
            </v-row>
          </v-col>
        </v-row>
        <!-- 分数值 -->
        <v-row>
          <div class="white--text font-weight-bold mt-n6">绿色积分：{{score}}</div>
        </v-row>
      </v-col>
    </v-row>
    <!-- 第二行,绿色出行收获 -->
    <div class="white--text title font-weight-black mt-8">今日绿色出行</div>
    <v-row>
      <v-col>
        <v-card>
          <!-- 第一行，步行 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="6">
              <v-list-item>
                <v-list-item-avatar>
                  <v-icon x-large color="primary">mdi-walk</v-icon>
                </v-list-item-avatar>
                <v-list-item-content class="pl-2">
                  <v-list-item-title>步行</v-list-item-title>
                  <v-list-item-subtitle>3km</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-end align-center">
              <div>+{{score1}}分</div>
            </v-col>
          </v-row>
          <!-- 第二行，骑行 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="6">
              <v-list-item>
                <v-list-item-avatar>
                  <v-icon large color="primary">mdi-bike</v-icon>
                </v-list-item-avatar>
                <v-list-item-content class="pl-2">
                  <v-list-item-title>骑行</v-list-item-title>
                  <v-list-item-subtitle>6km</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-end align-center">
              <div>+{{score2}}分</div>
            </v-col>
          </v-row>
          <!-- 第三行，公交车 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="6">
              <v-list-item>
                <v-list-item-avatar>
                  <v-icon x-large color="primary">mdi-bus</v-icon>
                </v-list-item-avatar>
                <v-list-item-content class="pl-2">
                  <v-list-item-title>公交车</v-list-item-title>
                  <v-list-item-subtitle>20km</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-end align-center">
              <div>+{{score3}}分</div>
            </v-col>
          </v-row>
          <!-- 第四行，地铁 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="6">
              <v-list-item>
                <v-list-item-avatar>
                  <v-icon x-large color="primary">mdi-subway-variant</v-icon>
                </v-list-item-avatar>
                <v-list-item-content class="pl-2">
                  <v-list-item-title>地铁</v-list-item-title>
                  <v-list-item-subtitle>10站</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-end align-center">
              <div>+{{score4}}分</div>
            </v-col>
          </v-row>
          <!-- 第五行，领取按钮 -->
          <v-row>
            <v-col>
              <div class="text-center mt-n6">
                <v-btn
                  width="300"
                  rounded
                  color="orange"
                  dark
                  class="mt-6 font-weight-bold"
                  @click="retain()"
                >一键收获</v-btn>
              </div>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>
    <!-- 第三行,记录 -->
    <div class="white--text title font-weight-black">积分清单</div>
    <v-row>
      <v-col>
        <v-card>
          <!-- 示例行 -->
          <v-row v-show="showb">
            <v-col cols="1"></v-col>
            <v-col cols="8">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>绿色出行收获</v-list-item-title>
                  <v-list-item-subtitle>20-3-11 21:51</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-start align-center">
              <div>+145</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <!-- 示例行 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="8">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>兑换碳积分</v-list-item-title>
                  <v-list-item-subtitle>20-3-11 21:51</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-start align-center">
              <div>-1000</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
          <!-- 示例行 -->
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="8">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>答题比拼</v-list-item-title>
                  <v-list-item-subtitle>20-3-11 21:51</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-col>
            <v-col cols="3" class="d-flex justify-start align-center">
              <div>+100</div>
            </v-col>
          </v-row>
          <v-divider></v-divider>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data: () => ({
    dialog: false,
    showb: false,
    score: 200,
    score1: 30,
    score2: 30,
    score3: 50,
    score4: 35
  }),
  methods: {
    retain() {
      this.score += this.score1 + this.score2 + this.score3 + this.score4;
      this.score1 = 0;
      this.score2 = 0;
      this.score3 = 0;
      this.score4 = 0;
      this.showb = true;
    }
  }
};
</script>

<style>
</style>